// utils/notify.js
export function showFloatingNotificationPopup() {
	// 判断是否 PWA 环境（iOS 只有添加到主屏幕后才支持）
	const isInStandalone = window.matchMedia('(display-mode: standalone)').matches ||
		window.navigator.standalone;

	if (!isInStandalone && /iphone|ipad|ipod/i.test(navigator.userAgent)) {
		// Safari 普通模式下不支持申请通知权限
		uni.showModal({
			title: '提示',
			content: 'iOS Safari 浏览器不支持网页通知。请先将此网页添加到主屏幕，再开启通知功能。',
			showCancel: false,
			confirmText: '我知道了'
		});
		return;
	}

	if (!('Notification' in window)) {
		uni.showToast({
			title: '浏览器不支持通知',
			icon: 'error'
		});
		return;
	}

	// 检查当前权限状态
	if (Notification.permission === 'granted') {
		uni.showToast({
			title: '已授权通知权限',
			icon: 'none'
		});
		return;
	} else if (Notification.permission === 'denied') {
		uni.showToast({
			title: '通知权限已被拒绝，请在浏览器设置中修改',
			icon: 'none'
		});
		return;
	}

	// 如果已经有弹窗，不再重复创建
	if (document.getElementById('floating-notify-mask')) return;

	// 遮罩层
	const mask = document.createElement('div');
	mask.id = 'floating-notify-mask';
	mask.style.cssText = `
        position: fixed; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0;
        background: rgba(0,0,0,0.4);
        display: flex; 
        justify-content: center; 
        align-items: center;
        z-index: 999999;
    `;

	// 弹窗容器
	const popup = document.createElement('div');
	popup.style.cssText = `
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        width: 80%;
        max-width: 320px;
        text-align: center;
        box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    `;
	popup.innerHTML = `
        <h3 style="margin:0 0 10px; font-size:18px;">开启通知提醒</h3>
        <p style="margin:0 0 20px; font-size:14px; color:#666;">
            请允许我们发送通知，以便及时接收最新消息。
        </p>
        <div style="display:flex; justify-content:center; gap:10px;">
            <button id="allow-notify" style="
                background:#007aff; color:#fff; border:none; border-radius:8px; padding:10px 16px; font-size:15px;
                cursor: pointer;
            ">允许通知</button>
            <button id="cancel-notify" style="
                background:#ddd; color:#333; border:none; border-radius:8px; padding:10px 16px; font-size:15px;
                cursor: pointer;
            ">以后再说</button>
        </div>
    `;

	mask.appendChild(popup);
	document.body.appendChild(mask);

	// 点击允许按钮
	document.getElementById('allow-notify').addEventListener('click', () => {
		Notification.requestPermission().then(permission => {
			if (permission === 'granted') {
				uni.showToast({
					title: '已授权通知权限',
					icon: 'success'
				});
			} else {
				uni.showToast({
					title: '未授予权限',
					icon: 'none'
				});
			}
			mask.remove();
		}).catch(error => {
			console.error('请求通知权限失败:', error);
			uni.showToast({
				title: '请求权限失败',
				icon: 'error'
			});
			mask.remove();
		});
	});

	// 点击取消按钮
	document.getElementById('cancel-notify').addEventListener('click', () => {
		mask.remove();
	});

	// 点击遮罩层关闭
	mask.addEventListener('click', (e) => {
		if (e.target === mask) {
			mask.remove();
		}
	});
}